<template>
  <div id="home">
    <nav-bar class="nav-bar">
      <div slot="center">shopping</div>
    </nav-bar>
    <home-swiper class="home-swiper" :banner="banners"></home-swiper>
    <recommend-view :recommend="recommends"></recommend-view>
    <tab-control
      :title="['流行', '新款', '精选']"
      @tabClick="tabClick"
    ></tab-control>
    <!-- <goods :goods = 'goods'></goods> -->
    <goods-list :goods = "showGoods"></goods-list>
  </div>
</template>

<script>
import NavBar from "../../components/common/navbar/NavBar.vue";
import Swiper from "../../components/common/swiper/Swiper.vue";
import SwiperItem from "../../components/common/swiper/SwiperItem.vue";
import RecommendView from "./homeComp/RecommendView";
import HomeSwiper from "./homeComp/HomeSwiper.vue";
import TabControl from "../../components/content/tabcontrol/TabControl.vue";
import { getHomeMultidata, getHomeGoods } from "../../network/home";
import GoodsList from '../../components/content/goods/GoodsList.vue';

export default {
  name: "Home",
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentType:'pop'
    };
  },
  components: {
    Swiper,
    SwiperItem,
    HomeSwiper,
    NavBar,
    RecommendView,
    TabControl,
    GoodsList,
  },
  computed:{
    showGoods(){
      return this.goods[this.currentType].list
    }
  },
  created() {
    getHomeMultidata().then((res) => {
      // console.log(res.data.recommend.list);
      this.banners = res.data.banner.list;
      this.recommends = res.data.recommend.list;
    });
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
  },
  methods: {
    tabClick(index) {
      // console.log(index)
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
      // console.log(this.currentType)
    },
    getHomeGoods(type){
      const page = this.goods[type].page+1;
      getHomeGoods(type,page).then(res => {
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page += 1
      })
      // console.log(this.goods[type].list)
    }
  },
};
</script>

<style scoped>
#home{
  position: relative;
}
.nav-bar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
}
.home-swiper{
  margin-top: 44px;
}
.tab-control{
  position: sticky;
  top: 44px;
  z-index: 9;
}
</style>